import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

interface ListItem {
  id?: string;
  content?: string;
  [key: string]: any;
}

/**
 * List列表组件
 * @element zss-list
 */
@customElement('zss-list')
export class ZssList extends LitElement {
  static styles = css`
    :host {
      display: block;
      width: 100%;
    }

    .list {
      border: 1px solid var(--zss-border-color);
      border-radius: var(--zss-border-radius-base);
      background-color: var(--zss-bg-color);
      overflow: hidden;
    }

    .list-item {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      border-bottom: 1px solid var(--zss-border-color);
      transition: background-color 0.2s;
    }

    .list-item:last-child {
      border-bottom: none;
    }

    .list-item:hover {
      background-color: var(--zss-fill-color-light);
    }

    .list-item.selected {
      background-color: var(--zss-color-primary-light-9);
    }

    .list-item.disabled {
      cursor: not-allowed;
      color: var(--zss-text-color-disabled);
      background-color: var(--zss-fill-color-light);
    }

    .list-item.disabled:hover {
      background-color: var(--zss-fill-color-light);
    }

    .item-content {
      flex: 1;
    }

    .item-actions {
      display: flex;
      gap: 8px;
      margin-left: 16px;
    }

    .item-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
      background-color: var(--zss-fill-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--zss-text-color-placeholder);
    }

    .item-title {
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-primary);
      margin-bottom: 4px;
      font-weight: 500;
    }

    .item-description {
      font-size: var(--zss-font-size-small);
      color: var(--zss-text-color-regular);
      line-height: 1.4;
    }

    .item-extra {
      margin-left: 16px;
      color: var(--zss-text-color-placeholder);
      font-size: var(--zss-font-size-small);
    }

    /* 无边框样式 */
    :host([border="false"]) .list {
      border: none;
      border-radius: 0;
    }

    :host([border="false"]) .list-item {
      border-bottom: none;
    }

    /* 尺寸 */
    :host([size="small"]) .list-item {
      padding: 8px 16px;
    }

    :host([size="small"]) .item-avatar {
      width: 32px;
      height: 32px;
      margin-right: 8px;
    }

    :host([size="small"]) .item-title {
      font-size: var(--zss-font-size-small);
    }

    :host([size="small"]) .item-description {
      font-size: 12px;
    }

    :host([size="large"]) .list-item {
      padding: 16px 24px;
    }

    :host([size="large"]) .item-avatar {
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }

    :host([size="large"]) .item-title {
      font-size: var(--zss-font-size-large);
    }

    :host([size="large"]) .item-description {
      font-size: var(--zss-font-size-base);
    }

    /* 分割线样式 */
    :host([split="false"]) .list-item {
      border-bottom: none;
    }

    /* 加载状态 */
    .loading {
      text-align: center;
      padding: 20px;
      color: var(--zss-text-color-placeholder);
    }

    .loading-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid var(--zss-border-color);
      border-top: 2px solid var(--zss-color-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 8px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 空状态 */
    .empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--zss-text-color-placeholder);
    }

    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
  `;

  /**
   * 列表数据
   * @attr data
   */
  @property({ type: Array })
  data: ListItem[] = [];

  /**
   * 是否显示边框
   * @attr border
   */
  @property({ type: Boolean })
  border = true;

  /**
   * 是否显示分割线
   * @attr split
   */
  @property({ type: Boolean })
  split = true;

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 是否显示加载状态
   * @attr loading
   */
  @property({ type: Boolean })
  loading = false;

  /**
   * 空数据时显示的文本
   * @attr empty-text
   */
  @property({ type: String })
  emptyText = '暂无数据';

  /**
   * 选中的项
   * @attr selected-keys
   */
  @property({ type: Array })
  selectedKeys: string[] = [];

  private handleItemClick = (item: ListItem) => {
    if (item.disabled) return;

    this.dispatchEvent(new CustomEvent('item-click', {
      detail: item
    }));
  };

  private handleItemSelect = (item: ListItem) => {
    if (item.disabled) return;

    const key = item.id || item.content || '';
    const newSelectedKeys = [...this.selectedKeys];
    
    if (newSelectedKeys.includes(key)) {
      const index = newSelectedKeys.indexOf(key);
      newSelectedKeys.splice(index, 1);
    } else {
      newSelectedKeys.push(key);
    }

    this.selectedKeys = newSelectedKeys;
    
    this.dispatchEvent(new CustomEvent('selection-change', {
      detail: this.selectedKeys
    }));
  };

  renderItem(item: ListItem, index: number) {
    const key = item.id || item.content || index.toString();
    const isSelected = this.selectedKeys.includes(key);
    
    return html`
      <div 
        class="list-item ${item.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}"
        @click=${() => this.handleItemClick(item)}
        @dblclick=${() => this.handleItemSelect(item)}
      >
        ${item.avatar ? html`
          <div class="item-avatar">${item.avatar}</div>
        ` : ''}
        
        <div class="item-content">
          ${item.title ? html`
            <div class="item-title">${item.title}</div>
          ` : ''}
          
          ${item.description ? html`
            <div class="item-description">${item.description}</div>
          ` : ''}
          
          ${item.content ? html`
            <div class="item-description">${item.content}</div>
          ` : ''}
        </div>
        
        ${item.extra ? html`
          <div class="item-extra">${item.extra}</div>
        ` : ''}
        
        ${item.actions ? html`
          <div class="item-actions">${item.actions}</div>
        ` : ''}
      </div>
    `;
  }

  render() {
    if (this.loading) {
      return html`
        <div class="list">
          <div class="loading">
            <div class="loading-spinner"></div>
            <div>加载中...</div>
          </div>
        </div>
      `;
    }

    if (this.data.length === 0) {
      return html`
        <div class="list">
          <div class="empty">
            <div class="empty-icon">📋</div>
            <div>${this.emptyText}</div>
          </div>
        </div>
      `;
    }

    return html`
      <div class="list">
        ${this.data.map((item, index) => this.renderItem(item, index))}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-list': ZssList;
  }
}